<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>确认订单</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=2014102898703">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css?t=2014102898703">
    <link href="__PUBLIC__/css/style.css?t=2014102898703" rel="stylesheet">
    <style>
      .pro_order{
        width: 80%;
        height: 180px;
        margin: 50px auto;
        font-size: 36px;
      }
      .pro_order p{
        display: block;
        background-color: #d89600;
        color: #fff;
      }

      .up_select{
        width: 80%;
        margin: 60px auto;
        font-size: :;6px;
      }

      .up_select li{
        margin: 60px auto;
      }
      .z-bank-Roundsel s {
    width: 20px;
    height: 20px;

    border-radius: 20px;
    display: inline-block;
    background-color: #26adec;
    border: 5px solid #bbb;
    float: right;
    position: relative;
    top: 13px;
}

.z-bank-Round {
    width: 20px;
    height: 20px;
    border: 5px solid #bbb;
    background: #fff;
    border-radius: 20px;
    display: inline-block;

    box-shadow: 0 1px 1px #ccc inset;
    float: right;
    position: relative;
    top: 13px;
}

#show-upload-pic{
  margin: 20px auto;
}
.btn-confirm {
    border-radius: 10px;
    height: 74px;
    width: 80%;
    background-color: #26adec;
    color: #ffffff;
    font-size: 42px;
    border: 0;
    outline: 0;
    display: block;
    margin: 20px auto;
}


.addmore_pic {
    border-radius: 10px;
    height: 74px;
    width: 80%;
    color: #222323;
    font-size: 42px;
    border: 0;
    outline: 0;
    display: block;
    margin: 20px auto;
     border: 5px solid #26adec;
}
#ulUpList>li>p{
  color: #777575;;
  font-size: 26px;
  font-weight:600; 
}

.weui_icon_msg:before {
    font-size: 255px;
}

.weui_icon_success:before {
    font-size: 255px;
    color: #26ADEC;
}



    </style>
</head>

<body>
    <div class="layout fixed" id="page-home">
        <header>
            <a href="javascript:history.go(-1);" class="link-left">返回</a>
        </header>
        <div class="address-bd">
            <center>
            <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" style="line-height: 2.4rem; padding:10px; font-size:32px;">
              <tbody>
                <tr>
                  <td width="14%" align="left">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
                  <td width="86%" align="left">{$name}</td>
                </tr>
                <tr>
                  <td align="left">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</td>
                  <td align="left">{$mphone}</td>
                </tr>
                <tr>
                  <td height="40" align="left" valign="top">预约时间：</td>
                  <td align="left" valign="top">{$appDate}</td>
                </tr>
                <tr>
                  <td align="left" valign="top">出&nbsp; 发&nbsp;&nbsp;地：</td>
                  <td align="left" valign="top">{$startAdd}</td>
                </tr>
                <tr>
                  <td align="left" valign="top">目 &nbsp;的 &nbsp;地：</td>
                  <td align="left" valign="top">{$endAdd}</td>
                </tr>
              </tbody>
            </table>
            </center>
        </div>
        
        <div class="address-bd">
            <center>
            <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" style="line-height: 2.4rem; padding:10px; font-size:32px;">
              <tbody>
                <volist name="list" id="vo" key="k" >
                <tr>
                  <td align="left">{$k}.{$vo.name}</td>
                  <td align="center">X{$vo.num}</td>
                  <!-- <td align="center" valign="middle">需拆装</td> -->
                </tr>
                </volist>
                
                
              </tbody>
            </table>
            </center>
        </div>
        
        <div class="confirm-order">
            <button type="button" class="btn-confirm" id="pro_submit">确认提交</button>
        </div>

    </div>
    <div id="page-upload-pic" class="layout fixed" style="display: none">
         <header>
            <a href="javascript:void();" class="link-left">返回</a>
                 </header>
                <div class="pro_order"><p>为了准确确认家具尺寸，避免不必要的现场议价，建议您如实清晰的上传所有需要搬运的照片。</p></div>
                <hr>
                <ul class="up_select" id="ulUpList">
                  <li data-up="1"><div class="fl ico ico-time">
                  </div>
                  <strong>现在去拍照上传照片</strong> <i class="z-bank-Round"><s></s></i>
                  <p>需要上传照片后挪窝可提供准确一口报价</p>
                  <hr>
                  </li>
                  <li data-up="2"><div class="fl ico ico-time">
                  </div>
                  <strong>现在不在家，稍后拍照上传照片</strong> <i class="z-bank-Round"><s></s></i>
                  <p>在我的订单，可继续上传照片</p>
                   <hr>
                  </li>
                  <li data-up="3"> <div class="fl ico ico-time">
                  </div>
                  <strong>我不愿上传照片</strong><i class="z-bank-Round"><s></s></i>
                  <p>无法确定家具尺寸，仅提供预估报价，需要现场议价</p>
                    <hr>
                  </li>
                </ul>
                 <div class="confirm-order">
                 <form  name="form1" action="__CONTROLLER__/orders" method="post">
            <input type="hidden" name="name" value="{$name}"  />
            <input type="hidden" name="mphone" value="{$mphone}"  />
            <input type="hidden" name="jiaju" value="{$jiaju}" />
            <input type="hidden" name="appDate" value="{$appDate}"  />
            <input type="hidden" name="beizhu" value="{$beizhu}" />
            <input type="hidden" name="items" value="{$items}"/>
            <input type="hidden" name="startAdd" value="{$startAdd}"  />
            <input type="hidden" name="endAdd" value="{$endAdd}"  />
            <input type="hidden" name="otherimages" value="" id="otherimages"/>
            <input type="hidden" name="upselect" value="" id="upselect" />

            <input type="hidden" name="endAdd" value="{$endAdd}"  />
            <button type="button" class="btn-confirm" id="confirm_yy">确认预约</button>
            </form>
        </div>
      
        </div>
<php>
        require_once "jssdk.php";
$jssdk = new JSSDK("wx9332faa7c9589a0e", "d2c3b99cccae5dd77c00487033919ad2");
$signPackage = $jssdk->GetSignPackage();  
    </php>
        
    
    <script src="__PUBLIC__/js/jquery.min.js?t=2014102898703"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js?t=2014102898703"></script>
     <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <div id="show-upload-pic" class="layout fixed" style="display: none">
                <div class="weui_msg">
                    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
                    <div class="weui_text_area">
                        <h2 style="color: #8E8A8A">上传完毕</h2>
                    </div>
                </div>
                <button type="button" class="addmore_pic" id="addmore_pic">上传更多</button>
                <button type="button" class="btn-confirm" id="finishimg">完成</button>
        </div>

       



    <script>
       wx.config({
    debug: false, 
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
           /*
            * 所有要调用的 API 都要加到这个列表中
            * 这里以图像接口为例
            */
          "chooseImage",
          "previewImage",
          "uploadImage",
          "downloadImage"
    ]
  });
    var btn = document.getElementById('weixin');   
    var paytype='';
      var images = {  
        localId: [],  
        serverId: []  
    }; 

$("#pro_submit").click(function () {
  $("#page-home").hide();
  $("#page-upload-pic").fadeIn();

});

/*function loadingToast(){
        var msg;
        arguments[0] ? msg = arguments[0] : msg = '图片上传中' ;
        var loadingToast;
        loadingToast = '\
           <div id="loadingToast" class="weui_loading_toast" style="display:none;">\
             <div class="weui_mask_transparent"></div>\
             <div class="weui_toast">\
                 <div class="weui_loading">\
                     <div class="weui_loading_leaf weui_loading_leaf_0"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_1"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_2"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_3"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_4"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_5"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_6"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_7"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_8"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_9"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_10"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_11"></div>\
                 </div>\
                 <p class="weui_toast_content">' + msg + '</p>\
              </div>\
           </div>\
        ';
        if(!$('#loadingToast').length){
           $('body').append(loadingToast);
        }else{
           $('#loadingToast.weui_toast_content').html(msg);
        }
        $('#loadingToast').fadeIn('fast');
     } */     


$("#confirm_yy").click(function () {

  if (paytype=='') {
    alert('请选择上传选项');
    return false;

  }else{
     $("#page-home").hide();
     $("#page-upload-pic").hide();
  }
  if (paytype==1) {
     
    wx.chooseImage({  
            success: function(res) {  
                images.localId = res.localIds;  
                alert('已选择 ' + res.localIds.length + ' 张图片');  
  
                if (images.localId.length == 0) {  
                    alert('请先使用 chooseImage 接口选择图片');  
                    return;  
                }  
                var i = 0, length = images.localId.length;  
                images.serverId = []; 
                function upload() {  
                    wx.uploadImage({  
                        localId: images.localId[i],  
                        success: function(res) {  
                            i++;  
                            //alert('已上传：' + i + '/' + length); 
                           //loadingToast();
                            images.serverId.push(res.serverId);  
                            if (i < length) {  
                                upload();  
                            }else{
                              $.post( '__CONTROLLER__/upweixinpic', 
                                      {otherimages:images.serverId,}
                                    , function(data) {
                                      $('#otherimages').val(data);
                                      $('#upselect').val(1);
                                      //window.location.href = data.url;   
                                    });
                              /* $("#page-home").hide();
                                $("#page-upload-pic").hide();*/
                              $("#show-upload-pic").fadeIn();

                            } 
                        },  
                        fail: function(res) {  
                            alert(JSON.stringify(res));  
                        }  
                    });  
                }  
                upload();  
            }  
        }); 

      }
        var url='__CONTROLLER__/orders';

  $.post( url, 
          $('form').serialize()
          //$('form').serialize()+'&otherimages='+images.serverId
        , function(data, status) {
          //alert(data.info);
          //window.location.href = data.url;  
          if (paytype>1) {
            alert('提交成功');
            WeixinJSBridge.call('closeWindow');
          } 
        });

  

});


$("#addmore_pic").click(function () {
    wx.chooseImage({  
            success: function(res) { 
            $("#show-upload-pic").hide(); 
                images.localId = res.localIds;  
                alert('已选择 ' + res.localIds.length + ' 张图片');  
  
                if (images.localId.length == 0) {  
                    alert('请先使用 chooseImage 接口选择图片');  
                    return;  
                }  
                var i = 0, length = images.localId.length;  
                images.serverId = []; 
                function upload() {  
                    wx.uploadImage({  
                        localId: images.localId[i],  
                        success: function(res) {  
                            i++;  
                            //alert('已上传：' + i + '/' + length); 
                           //loadingToast();
                            images.serverId.push(res.serverId);  
                            if (i < length) {  
                                upload();  
                            }else{
                              $("#show-upload-pic").fadeIn(); 
                              $.post( '__CONTROLLER__/upweixinpic', 
                                      {otherimages:images.serverId,}
                                    , function(data) {
                                      
                                    });
                               

                            } 
                        },  
                        fail: function(res) {  
                            alert(JSON.stringify(res));  
                        }  
                    });  
                }  
                upload();  
            }  
        }); 

});


var z=$("#ulUpList").children('li');
  z.click(function() {

     $(this).children("i").attr("class", "z-bank-Roundsel");
      paytype=$(this).data('up');
      $("#upselect").val(paytype);
       $(this).siblings().children("i").attr("class", "z-bank-Round");
})

 $("#finishimg").click(function () {
   WeixinJSBridge.call('closeWindow');

});


    </script>
</body>
  
</html>


